<template>
	<view class="ker_swiper">
		<uni-swiper-dot 
			:info="dotList" 
			:current="backUpIndex" 
			:mode="kerMode" 
			:dotsStyles ="dotsStyles"
			:field="field"
			:showDots="showDotsFlag"
		>
			<swiper
				:indicator-dots='dots'
				:autoplay='swiperAutoplay'
				:interval='interval'
				:duration='duration'
				:style="{ 'height':( isAuto ? height : limitTarget.height +'rpx') }"
				class="pic_swiper_wrap"
				@change="changeBannerHandle"
			>
				<block v-if="!slotShow">
					<swiper-item
						v-for="(item,index) in list" 
						:key="index" 
						class="swiper_item"
					>
						<video
						v-if="item.video"
							id="myVideo"
							:src="item.video" 
							:poster="item.img" 
							controls 
							class="swiper_video"
							@play="playHandle"
							@fullscreenchange="screenChange"
						></video>
						<image
						v-else
							class="img" 
							:src="item.img" 
							mode="scaleToFill" 
							@load= "imageLoad($event,index)" 
							@tap = "previewImgHandle(index)"
						></image>
					</swiper-item>
				</block>
				<block v-else>
					<slot></slot>
				</block>
			</swiper>
		</uni-swiper-dot>
	</view>
</template>

<script>
	/**
	 * SwiperDod 轮播图指示点 + 轮播图预览
	 * @description 自定义轮播图指示点 + 轮播图预览
	 * @tutorial 在uni-ui 的uni-swiper-dot 基础上修改
	 * @property {Array} list 图片列表数组，必须是数组格式
	 * @property {Number} current 当前指示点索引，必须是通过 `swiper` 的 `change` 事件获取到的 `e.detail.current`
	 * @property {Boolean} isAuto= [true|false] 是否是高度自适应的swiper,默认false
	 * @property {Object} limitStyObj  swiper的宽高 ，默认width:100%, height: 500rpx
	 * @property {String} kerMode = [default|round|dot|nav|indexes|capsule] 指示点的类型
	 * 	@value defualt 默认指示点
	 * 	@value round 圆形指示点
	 * 	@value nav 条形指示点
	 * 	@value indexes 索引指示点
	 *  @value capsule  胶囊型，显示当前与总数
	 * @property {String} field kerMode 为 nav 时，显示的内容字段（mode = nav 时非必填）
	 * @property {String} info 轮播图的数据，通过数组长度决定指示点个数
	 * @property {Object} dotsStyles 指示点样式
	 * @property {Boolean} autoplay = [true|false]  轮播图是否自动播放
	 * @property {Number} interval 自动切换时间间隔，单位ms
	 * @property {Number} duration 滑动动画时长，单位ms
	 * @event {Function} clickItem 组件触发点击事件时触发，e={currentIndex}
	 * @example  <ker-swiper-preview :list="picList" :kerMmode="kerMmode" :dotsStyles ='dotsStyles' :autoplay='autoplay' :interval='interval' :duration='duration' field="" :isAuto='false' :limitStyObj = 'limitStyle'></ker-swiper-preview>
	 */
	import uniSwiperDot from "./components/ker-swiper-dots.vue"
	export default {
		name:'ker-swiper-preview',
		components:{
			uniSwiperDot
		},
		props:{
			// swiper是否是固定宽高的类型, auto|limit
			isAuto: {  
				type: Boolean,
				default: false
			},
			slotShow: {
				type: Boolean,
				default: false
			},
			// 限制类型的宽高样式
			limitStyObj: {
				type: Object,
				default() {
					return{}
				}
			},
			// 父组件传来的图片列表数组
			list: {
				type: Array,
				default () {
					return []
				}
			},
			kerMode: {
				type: String,
				default: '',
			},
			dotsStyles: {
				type: Object,
				default () {
					return {}
				}
			},
			autoplay: {
				type: Boolean,
				default: true
			},
			interval: {
				type: Number,
				default: 5000
			},
			duration: {
				type: Number,
				default: 500
			},
			// 只在 nav 模式下生效，变量名称
			field: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				dots: false,   //禁用掉swiper自带的指示点
				activeIndex: 0,
				backUpIndex: 0,
				height: 0,
				imgHeightArr: [],   //存放所有图片高度的数组
				screenW: 0,  //屏幕宽度
				limitTarget: {
					width: '100%',
					height: 500
				},
				showDotsFlag: true,
				dotList:[],
				swiperAutoplay: true
			}
		},
		watch:{
			limitStyObj:{
				immediate: true,
				handler(e){
				this.limitTarget = Object.assign(this.limitTarget,this.limitStyObj);   
				this.height = this.limitTarget;
			}
			},
			autoplay: {
				immediate: true,
				handler(val) {
					this.swiperAutoplay = val;
				}
			},
			list: {
				immediate: true,
				deep: true,
				handler(val) {
				if (val.length > 0) {
					this.showDotsFlag = val[0].video ? false : true;
					val.forEach(e => {
						if (!e.video) {
							this.dotList.push(e)
						}
					})
				}
			}
			}
		},
		created() {
			this.limitTarget = Object.assign(this.limitTarget,this.limitStyObj);
		},
		mounted() {		
			this.getDeviceVal()
		},
		methods: {
			/* 获取屏幕宽高 */
			getDeviceVal() {
				let obj = uni.createSelectorQuery().in(this).select('.ker_swiper')
				obj.boundingClientRect( (data)=> { // data - 各种参数
					this.screenW = data.width	
					}).exec()
			},
			/* swiper切换 */  //切换时，会有闪白现象?????
			changeBannerHandle(e) {
				this.swiperAutoplay = true;
				this.activeIndex = e.detail.current;
				if (this.list[this.activeIndex].video) {
					this.showDotsFlag = false
				} else {
					this.showDotsFlag = true
				}
				let vLen = 0;
				this.list.filter((e, i)=>{
					if (e.video && i <= this.activeIndex) {
						vLen++;
					}
				});
				this.backUpIndex = this.activeIndex - vLen;
				this.imgHeightArr.forEach((val, index) => {
					if(index===this.activeIndex){
						this.height = val
					}
				})
			},
			/* 图片加载成功后计算高度 */
			imageLoad(e, imgIndex){
				let imgW = e.detail.width;
				let imgH = e.detail.height;
				let _this = this;
			  let setImgHeight = '';
				setImgHeight = _this.screenW/imgW * imgH + 'px';
				
				//把每一张图片的对应的高度记录到数组里
				_this.imgHeightArr[imgIndex] = setImgHeight;
				 // console.log(	_this.imgHeightArr,'##')
				if(this.activeIndex===imgIndex){
					_this.height= setImgHeight
				}	
			},
			/* 图片预览 */
			previewImgHandle(i) {
				let photoList = this.list.map(item => {
					return item.img
				})
				uni.previewImage({
					current: i,     // 当前显示图片的链接/索引值
					urls: photoList,    // 需要预览的图片链接列表，photoList要求必须是数组
				});
			},
			/* 视频播放时 */
			playHandle() {   
				this.swiperAutoplay = false;
			}
		}
	}

</script>

<style lang="scss" scoped>
	@import '../common/common.scss';
	.ker_swiper{
		position: relative;
		width: 100%;
	}
	.pic_swiper_wrap{
		width: 100%;
		// height: 1000rpx;
		// transition: all .5s;
		
	}
	.swiper_item{
		position: relative;
		width: 100%;
		.img{
			width: 100%;
			height: 100%;
			display: block;
		}
		.video_cover{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(0,0,0,0.5);
			.play_btn{
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
				width: 132rpx;
				height: 132rpx;
				background:  $ker_play_btn;
				background-size: contain;
				z-index: 2;
			}
		}
	}	
	.swiper_video{
		width: 100%;
		height: 100%;
	}
</style>
